<template>
  <h1 class="title">新闻头条</h1>
  <div class="link-wrapper">
    <router-link to="/toutiao">新闻头条</router-link>
    <router-link to="/category">分类新闻</router-link>

  </div>
  <router-view></router-view>
<!--  <nav>-->
<!--    <router-link to="/">Home</router-link> |-->
<!--    <router-link to="/about">About</router-link>-->
<!--  </nav>-->
<!--  <router-view/>-->
</template>

<script>
export default {
  name:"App"
}
</script>

<style scoped lang="stylus">

//*
//  margin 0
//  padding 0

.title
  text-align center
  width 100%
  height 50px
  line-height 50px
  color white
  background-color rgb(170,23,15)
  font-size 20px
.link-wrapper
  display flex
  width 100%
  height 30px
  justify-content center
  align-items center
  a
    position relative
    box-sizing border-box
    margin 0 20px
    text-decoration none
    color #000
  .router-link-active::after
    position absolute
    bottom -6px
    display block
    content ''
    width 100%
    height 2px
    background-color rgb(170,23,15)



//#app
//  font-family Avenir, Helvetica, Arial, sans-serif
//  -webkit-font-smoothing antialiased
//  -moz-osx-font-smoothing grayscale
//  text-align center
//  color #2c3e50
//  margin-top 60px
</style>
